<template>
    <div class="myindex">
        <div class="container">
            <header>
                <router-link to="/my/center" class="imgcon">
                    <img :src="FaceUrl||'//common-1253410441.file.myqcloud.com/coverimg/20170621164206.png'"
                         :alt="NickName">
                    <h6>{{NickName}}</h6>
                </router-link>
                <a class="recharge" href="javascript:;" @click="jump('/security/recharge')">充值</a>
            </header>
        </div>
        <section class="pnel">
            <label class="labelitem" for="">
                <router-link to="/my/details">
                    <span>彩豆余额</span>
                    <strong><b class="orange">{{balance}}</b>
                        <icon name="right" scale="1.5"></icon>
                    </strong>
                </router-link>
            </label>
        </section>

        <section v-if="expert" class="pnel">
            <label class="labelitem nob" for=""> <span>我是彩帝</span> <strong @click="jump('/news/info/11520')"
                                                                           class="gry">
                <span>说明<icon name="right" scale="1.5"></icon></span>
            </strong></label>
            <div class="menus">
                <dl>
                    <dd>
                        <router-link to="/my/myrecommend">
                            <strong>{{expertPlanCounts}}</strong>
                            <span>我的推荐</span>
                        </router-link>
                    </dd>
                    <dd>
                        <router-link to="/my/awaitgetdou">
                            <strong>{{frozenBalance}}</strong>
                            <span>待结算彩豆</span>
                        </router-link>
                    </dd>
                    <dd>
                        <router-link to="/shop/index">
                            <strong>兑好礼</strong>
                            <span>彩豆商城</span>
                        </router-link>

                    </dd>
                    <dd>
                        <router-link to="/buy/football">
                            <strong>财源滚滚</strong>
                            <span>发起推荐</span>
                        </router-link>
                    </dd>
                </dl>
            </div>
        </section>
        <section v-else class="pnel">
            <label class="labelitem" for="" @click="jump('/god/applygod')">
                <span>申请彩帝</span>
                <strong>
                    <icon name="right" scale="1.5"></icon>
                </strong>
            </label>
        </section>
        <section class="pnel">
            <label class="labelitem" for="">
                <router-link to="/my/billists">
                    <span>付费阅读</span>
                    <strong>
                        <icon name="right" scale="1.5"></icon>
                    </strong>
                </router-link>
            </label>
            <label class="labelitem" for="">
                <router-link to="/my/attentiongod">
                    <span>关注彩帝</span>
                    <strong>
                        <icon name="right" scale="1.5"></icon>
                    </strong>
                </router-link>
            </label>
            <label class="labelitem" for="">
                <router-link to="/my/collectrecommend">
                    <span>收藏推荐</span>
                    <strong>
                        <icon name="right" scale="1.5"></icon>
                    </strong>
                </router-link>
            </label>
            <label class="labelitem" for="">
                <router-link to="/news/info/11568">
                    <span>帮助中心</span> <strong>
                    <icon name="right" scale="1.5"></icon>
                </strong>
                </router-link>
            </label>
        </section>
    </div>
</template>

<script>
    import Button from '../../components/Button.vue';
    import store from '../../store/index';
    import {getMyInfoR} from '../../service/my';
    import {getMytoken} from '../../service/common';
    import {isWeixin} from '../../uitls/common';
    import store2 from 'store2';
    export default {
        components: {
            myButton: Button,
        },
        data() {
            return {
                "balance": 0,
                "cityID": 0,
                "distillBalance": "string",
                "encryptUserID": "string",
                "faceUrl": "",
                "hbcount": 0,
                "id": 0,
                "idcardNumber": "string",
                "isBuy": 0,
                "isFirstLogin": true,
                "NickName": '注册/登录',
                "isHavPay": true,
                "isHavPwd": true,
                "isMobileValided": true,
                FaceUrl: '',
                expert: null
            };
        },
        created() {
            this.getInfodata();
        },
        computed: {},
        methods: {
            async getInfodata(){
                const {token}=await getMytoken(true);
                if(!token) {
                    return;
                }
                const {data}=await getMyInfoR(token);
                if(data && data.code === 0) {
                    const {clientMbr, balance, nick, expert, expertPlanCounts, frozenBalance}=data.data;
                    store2('userInfo', {
                        ...clientMbr, ...store2('userInfo'), ...{
                            version: 'mlb',
                            balance: balance,
                            mobile: nick,
                            havPay: clientMbr.IsHavPay,
                            IsUnionUser: clientMbr.IsUnionUser,
                            expert,
                            expertPlanCounts,
                            frozenBalance
                        }
                    });
                    const {NickName, FaceUrl}=store2('userInfo');
                    this.FaceUrl = FaceUrl;
                    this.balance = balance;
                    this.clientMbr = clientMbr;
                    this.expert = expert;
                    this.NickName = NickName||nick;
                    this.expertPlanCounts = expertPlanCounts;
                    this.frozenBalance = frozenBalance;
                }
                else {
                    const isWx = isWeixin();
                    if(isWx) {
                        store2.clear();
                        location.reload();
                    }
                    else {
                        this.$router.replace('/common/login');
                    }
                }
            },
            async jump(data){
                const {token, Mobile}= await getMytoken();
                if(['/security/recharge', '/god/applygod'].indexOf(data) > -1) {
                    const isWx = isWeixin();
                    if(isWx && Mobile === '') {
                        store.commit('common/changevalue', {showBindPhone: true});
                        return;
                    }
                }
                this.$router.push(`${data}`)
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    @import "../app";

    .myindex {

    }

    .pnel {
        margin-bottom: 20px;
        padding: 0 22px 0 33px;
        background: #fff;
    }

    .labelitem {
        height: 120px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid @color12;
        a {
            display: flex;
            flex: 1;
        }
        &:last-child, &.nob {
            border: none;
        }
        span {
            flex: 1;
            font-size: @fz32;
        }
        strong {
            display: flex;
            align-items: center;
            &.gry {
                color: @color3;
                font-size: @fz28;
            }
            .orange {
                font-size: @fz32;
                color: @colororange;
            }
            svg {
                color: @color4;
                margin-left: 30px;
            }
        }

    }

    .menus {
        dl {
            display: flex;
            padding-bottom: 40px;
            dd {
                flex: 1;
                text-align: center;
                display: flex;
                flex-direction: column;
                justify-content: center;
                font-weight: bold;
                border-right: 1px solid @color12;
                height: 96px;

                &:last-child {
                    border: none;
                }
                a {
                    display: flex;
                    flex-direction: column;
                    strong {
                        font-weight: bold;
                        color: @colororange;
                        font-size: @fz32;
                        margin-bottom: 8px;
                    }
                    span {
                        color: @color3;
                        font-size: @fz28;
                    }
                }

            }
        }
    }

    .container {
        header {
            height: 202px;
            background: url(http://common-1253410441.file.myqcloud.com/activityimg/20171211193605.png) no-repeat center;
            background-size: cover;
            display: flex;
            align-items: center;
            .imgcon {
                flex: 1;
                display: flex;
                align-items: center;
            }
            img {
                width: 120px;
                height: 120px;
                box-sizing: border-box;
                border: 2px solid #fff;
                border-radius: 50%;
                margin-left: 33px;
                margin-right: 23px;
            }
            h6 {
                color: #fff;
                font-weight: bold;
                font-size: @fz36;
                flex: 1;
            }
            .recharge {
                width: 106px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                color: #fff;
                background: @colororange;
                font-size: @fz26;
                margin-right: 20px;
                border-radius: 4px;

            }
        }
    }
</style>